<template>
	<view class="area-container">
		<!-- #ifdef MP-WEIXIN -->
		<view class="header-phone-stauts-show"></view>
		<!-- #endif -->
		<!-- 标题栏 -->
		<!-- 标题栏 -->
		<cl-topbar title="选择门店" background-color='#f7f7f7' :border='false'></cl-topbar>
		<!-- 交互界面 -->
		<!-- 附近门店 -->
		<view class="near-store">
			<view class="title">
				附近门店
			</view>
			<view class="store-list">
				<cl-scroller ref="area" :refresher-enabled='false' :show-back-top-button='false'
					:show-scrollbar='false'>
					<StoreList :areaList="areaList" @selectStore="selectStore"></StoreList>
				</cl-scroller>
			</view>
		</view>
	</view>
</template>

<script>
	import StoreList from '@/components/StoreList/index.vue'
  import {getRestaurantList} from "@/common/api";
  import {mapState} from "vuex";
	export default {
		name: 'Area',
    onLoad() {
      this.getStoreList()
    },
		components: {
			StoreList
		},
		data() {
			return {
				areaList:[]
			}
		},
    computed: {
      ...mapState({restaurantId: state => state.restaurant.restaurantId})
    },
		methods: {
      // 获取门店列表
    async getStoreList() {
        const res = await getRestaurantList()
      const restaurantId = this.restaurantId===-1?res.data[0].id:this.restaurantId
        this.areaList = res.data.map((item) => {
          return {
            id: item.id,
            name: item.name,
            address: item.address,
            image: item.image,
            selected: item.id===restaurantId?true:false
          }
        })
      console.log(this.areaList,'this.areaList')
      },
        // 选择门店
      selectStore(item) {
        for(const v of this.areaList){
          if(v.id===item.id){
            v.selected=true
          }else{
            v.selected=false
          }
        }
        this.$store.dispatch('setRestaurantId', item.id)
        console.log( this.restaurantId,' this.restaurantId')
      }
		}
	}
</script>

<style lang="scss" scoped>
	.area-container {
		width: 100%;
		height: 100vh;
		background-color: $pages-background-color;


		//微信小程序独有的头部展示
		.header-phone-stauts-show {
			width: 100%;
			height: 40rpx;
			background-color: #f7f7f7;
		}


		.near-store {
			position: relative;
			width: 100%;
			/* #ifndef MP-WEIXIN */
			height: calc(100vh - 88rpx);
			/* #endif */
			/* #ifdef MP-WEIXIN */
			height: calc(100vh - 128rpx);

			/* #endif */
			.title {
				width: 100%;
				height: 60rpx;
				display: flex;
				align-items: center;
				padding-left: 38rpx;
				font-size: 32rspx;
				font-weight: 400;
				color: #7F8583;
			}


			.store-list {
				width: 100%;
				height: calc(100% - 120rpx);
				overflow: hidden;
			}
		}
	}
</style>
